<template>
  <div class="m-view-servicePerson m-window">
    <div class="m-condition">
      <el-row :gutter="10">
        <el-form label-width="55px" :model="searchForm">
          <el-col :span="5">
            <el-form-item label="公司：">
              <el-select
                placeholder="请输入公司名称"
                v-model="searchForm.companyCode"
                clearable
              >
                <el-option
                  v-for="(item, index) in companyList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="部门：">
              <el-input
                v-model="searchForm.deptName"
                placeholder="请输入部门名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名：">
              <el-input
                v-model="searchForm.contactName"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-checkbox v-model="searchForm.state" @change="handleShowStop"
              >显示停用</el-checkbox
            >
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="search(1)">查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="add">新增</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="edit">编辑</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="handleStopStart">{{
              buttoTtile
            }}</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="m-agTable m-bottom">
      <ag-grid-vue
        class="m-agTableContent ag-theme-balham"
        :gridOptions="gridOptions"
        :columnDefs="columnDefs"
        :rowData="rowData"
        v-loading="loading"
      ></ag-grid-vue>
    </div>
    <div class="m-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        :current-page="pageInfo.current"
        :page-sizes="[30, 50, 100, 150, 200]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <!--新增/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      v-dialogDrag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="公司：" prop="companyCode">
          <el-select
            placeholder="请选择公司"
            v-model="ruleForm.companyCode"
            clearable
          >
            <el-option
              v-for="(item, index) in companyList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop="deptName">
          <el-input
            v-model="ruleForm.deptName"
            placeholder="请输入部门名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="contactName">
          <el-input
            v-model="ruleForm.contactName"
            placeholder="请输入联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="CC账号：" prop="ccAccount">
          <el-input
            v-model="ruleForm.ccAccount"
            placeholder="请输入CC号"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="AddSaveData('ruleForm')"
          >保存</el-button
        >
        <el-button type="primary" @click="AddSaveDataAgain()"
          >保存并继续</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import gridOptions from "lesso-common/public/gridOptions";
import _Api from "@/api";
import constant from "@/public/constant";
export default {
  data() {
    return {
      searchForm: {
        companyCode: "", //公司code
        companyName: "", //公司名字
        deptName: "", //部门
        contactName: "", //联系姓名
        state: null, //显示停用
      },
      //ag-grid 配置项
      gridOptions: null,
      columnDefs: null,

      rowData: [], //  表格数据
      loading: false, //加载条
      //  分页信息
      pageInfo: {
        size: 30,
        current: 1,
        total: 0,
      },
      // 弹窗是否显示
      dialogVisible: false,
      // 弹窗标题
      title: "新增服务人员",
      // 弹窗表单信息
      ruleForm: {
        companyCode: "", //公司
        deptName: "", //部门
        contactName: "", //联系人
        ccAccount: "", //CC号
        id: "",
      },
      //公司下拉框
      companyList: [],
      // 表单验证规则
      rules: {
        companyCode: {
          required: true,
          message: "公司不能为空",
          trigger: "blur,change",
        },
        deptName: {
          required: true,
          message: "部门不能为空",
          trigger: "blur,change",
        },
        contactName: {
          required: true,
          message: "联系人不能为空",
          trigger: "blur,change",
        },
        ccAccount: {
          required: true,
          message: "CC账号不能为空",
          trigger: "blur,change",
        },
      },
      buttoTtile: "停用",
    };
  },
  beforeMount() {
    this.gridOptions = gridOptions();
    this.columnDefs = [
      {
        headerName: "公司",
        field: "companyName",
        checkboxSelection: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
      },
      { headerName: "部门", field: "deptName" },
      { headerName: "联系人姓名", field: "contactName" },

      { headerName: "CC账号", field: "ccAccount" },
      { headerName: "创建日期", field: "createDate" },
      { headerName: "创建人", field: "creator" },
      { headerName: "修改日期", field: "modifyDate" },
      { headerName: "修改人", field: "modifyer" },

      {
        headerName: "状态",
        field: "state",
        cellRenderer: function (params) {
          if (params.value == "1") return '<span class="ag-icon">停用</span>';
          else if (params.value == "0")
            return '<span class="ag-icon">启用</span>';
        },
      },
    ];
  },
  mounted() {
    this.search(); //查询数据
    this.getAuthInfo(); //公司
  },
  methods: {
   
    // 显示停用
    handleShowStop(data) {
      
      if (data == true) {
        this.buttoTtile = "启用";
        this.searchForm.state = true;
      } else {
        this.buttoTtile = "停用";
        this.searchForm.state = false;
      }
      this.search(1);
    },
    //   查询数据
    search(flag) {
      if (flag) {
        this.pageInfo.current = 1;
      }

      let params = {
        pageSize: this.pageInfo.size,
        current: this.pageInfo.current,

        companyCode: this.searchForm.companyCode,
        contactName: this.searchForm.contactName,
        deptName: this.searchForm.deptName,
      };
      if (this.searchForm.state != null) {
        params.state = this.searchForm.state ? 1 : 0;
      }
      this.loading = true;

      _Api
        .getBySupplierList(params)
        .then((response) => {
          let data = response.data;

          this.pageInfo.total = data.total;
          if (data.code == 1 && data.total != 0) {
            this.rowData = data.rows;
            this.loading = false;
          } else {
            this.loading = false;
            this.rowData = [];
          }
        })
        .catch((err) => {
          this.rowData = [];
          this.loading = false;

          this.$alert(err.data.message, {
            showClose: false,
            confirmButton: "确定",
            customClass: "alertFailure",
          });
        });
    },
    // 获取当前供应商所有的客户列表
    getAuthInfo() {
      let obj = {};
      if (constant.user.userTypeId == 4) {
        obj.account = constant.user.userName;
        obj.userType = 2;
        obj.flag = 1;
      } else {
        obj.account = constant.user.oaNum;
        obj.userType = 1;
        obj.flag = 1;
      }
      _Api
        .getAuthInfo(obj)
        .then((res) => {
          let data = res.data;
          if (data.code == 1 && data.rows.myMstCompany != 0) {
            let companyArr = data.rows.myMstCompany;
            companyArr.forEach((item) => {
              let obj = {
                code: item.companyCode,
                name: item.companyName,
              };
              this.companyList.push(obj);
            });
          } else {
            this.companyList = [];
          }
        })
        .catch((err) => {
          Msg.showErrorMsg("操作失败");
          this.comOptions = [];
        });
    },
    // 每页显示条数改变回调
    handleSizeChange(val) {
      this.pageInfo.size = val;
      this.search(1);
    },
    // 页码改变回调
    handleCurrentChange(val) {
      this.pageInfo.current = val;
      this.search();
    },
    // 点击上一页回调
    handlePrevClick(val) {
      this.pageInfo.current = val;
    },
    // 点击下一页回调
    handleNextClick(val) {
      this.pageInfo.current = val;
    },
    // 新增按钮
    add() {
      this.dialogVisible = true;
    },
    // 新增/编辑保存
    AddSaveData(formName, aginFlag) {
      console.log(this.ruleForm, "新增数据");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            //编辑
            let parmas = {
              companyCode: this.ruleForm.companyCode,
              contactName: this.ruleForm.contactName,
              deptName: this.ruleForm.deptName,
              ccAccount: this.ruleForm.ccAccount,
              id: this.ruleForm.id,
            };

            _Api
              .editServicePersonnel(parmas)
              .then((response) => {
                console.log(response, "编辑");
                let data = response.data;
                if (data.code == 1) {
                  this.$message({
                    message: data.msg,
                    type: "success",
                  });
                  if (aginFlag == true) {
                    this.handleClose(1);
                  } else {
                    this.handleClose();
                  }
                  this.search(1);
                } else {
                  this.$alert(data.info, {
                    showClose: false,
                    confirmButton: "确定",
                    customClass: "alertFailure",
                  });
                  if (aginFlag == true) {
                    this.handleClose(1);
                  } else {
                    this.handleClose();
                  }
                }
              })
              .catch((err) => {
                this.$alert(err.data.message, {
                  showClose: false,
                  confirmButton: "确定",
                  customClass: "alertFailure",
                });
                this.dialogVisible = false;
              });
          } else {
            //新增
            let parmas = {
              companyCode: this.ruleForm.companyCode,
              contactName: this.ruleForm.contactName,
              deptName: this.ruleForm.deptName,
              ccAccount: this.ruleForm.ccAccount,
            };

            _Api
              .addServicePersonnel(parmas)
              .then((response) => {
                console.log(response, "保存");
                let data = response.data;
                if (data.code == 1) {
                  this.$message({
                    message: data.msg,
                    type: "success",
                  });
                  if (aginFlag == true) {
                    this.handleClose(1);
                  } else {
                    this.handleClose();
                  }
                  // this.handleClose();
                  this.search(1);
                } else {
                  this.$alert(data.info, {
                    showClose: false,
                    confirmButton: "确定",
                    customClass: "alertFailure",
                  });
                  if (aginFlag == true) {
                    this.handleClose(1);
                  } else {
                    this.handleClose();
                  }
                }
              })
              .catch((err) => {
                this.$alert(err.data.message, {
                  showClose: false,
                  confirmButton: "确定",
                  customClass: "alertFailure",
                });
                this.handleClose();
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 继续添加
    AddSaveDataAgain() {
      this.AddSaveData("ruleForm", 1);
    },
    // 编辑业务类型
    edit() {
      let row = this.gridOptions.api.getSelectedRows();
      if (row.length <= 0) {
        this.$alert("提示：请选择需要编辑的数据", {
          showClose: false,
          confirmButtonText: "确定",
          customClass: "alertPrompt",
        });
        return;
      }
      if (row.length > 1) {
        this.$alert("提示：一次只能选择一条数据进行编辑！", {
          showClose: false,
          confirmButtonText: "确定",
          customClass: "alertPrompt",
        });
        return;
      }

      this.title = "编辑业务类型";

      this.dialogVisible = true;
      let editRow = row[0];
      this.ruleForm.companyCode = editRow.companyCode;
      this.ruleForm.deptName = editRow.deptName;
      this.ruleForm.contactName = editRow.contactName;
      this.ruleForm.ccAccount = editRow.ccAccount;
      this.ruleForm.id = editRow.id;
    },
    // 停用启用
    handleStopStart() {
      let rows = this.gridOptions.api.getSelectedRows();
       console.log(rows, "row--99");
       let idList=[];
        rows.forEach(item=>{
          idList.push(item.id)
        })
       
       _Api
        .switchStateServicePersonnel(idList)
        .then((response) => {
          let data = response.data;
          if (data.code == 1) {
            this.$message({
              message: data.msg,
              type: "success",
            });

            this.search(1);
          } else {
            this.$alert(data.info, {
              showClose: false,
              confirmButton: "确定",
              customClass: "alertFailure",
            });
          }
        })
        .catch((err) => {
          console.log(err,'err')
          this.$alert(err.data.message, {
            showClose: false,
            confirmButton: "确定",
            customClass: "alertFailure",
          });
        });



      // if (row.length <= 0) {
      //   this.$alert("提示：请选择需要编辑的数据", {
      //     showClose: false,
      //     confirmButtonText: "确定",
      //     customClass: "alertPrompt",
      //   });
      //   return;
      // }
      // if (row.length > 1) {
      //   this.$alert("提示：一次只能选择一条数据进行编辑！", {
      //     showClose: false,
      //     confirmButtonText: "确定",
      //     customClass: "alertPrompt",
      //   });
      //   return;
      // }
      // let stopRow = row[0];
      // console.log(stopRow, "stopRow");
     
      // let parmas = {
      //   companyCode: stopRow.companyCode,
      //   contactName: stopRow.contactName,
      //   deptName: stopRow.deptName,
      //   ccAccount: stopRow.ccAccount,
      //   id: stopRow.id,
      //   // state:1
      // };
      // if (this.searchForm.state != null) {
      //   parmas.state = this.searchForm.state ? 0 : 1;
      // }
      // _Api
      //   .editServicePersonnel(parmas)
      //   .then((response) => {
      //     let data = response.data;
      //     if (data.code == 1) {
      //       this.$message({
      //         message: data.msg,
      //         type: "success",
      //       });

      //       this.search(1);
      //     } else {
      //       this.$alert(data.info, {
      //         showClose: false,
      //         confirmButton: "确定",
      //         customClass: "alertFailure",
      //       });
      //     }
      //   })
      //   .catch((err) => {
      //     this.$alert(err.data.message, {
      //       showClose: false,
      //       confirmButton: "确定",
      //       customClass: "alertFailure",
      //     });
      //   });
    },
    // 关闭弹窗
    handleClose(flag) {
      this.ruleForm.companyCode = "";
      this.ruleForm.deptName = "";
      this.ruleForm.contactName = "";
      this.ruleForm.ccAccount = "";
      this.ruleForm.id = "";
      if (flag == true) {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = false;
      }

      //   this.search()
    },
  },
};
</script>

<style>
</style>